<template>
  <div class="cart">
    <!-- 购物车图标, 点击购物车图标去往购物车页面 -->
    <router-link class="curr" to="/cart" @mousemove="showLayer = true">
      <i class="iconfont icon-cart"><em>{{ $store.getters['cart/validTotal'] }}</em></i>
    </router-link>

    <!-- 购物车弹出层 -->
    <!-- 控制弹层显示时机, 购物车数量>0 且不是购物车页面(通过路由判断) -->
    <div v-if="showLayer && validPrice > 0 && $route.path !== '/cart'" class="layer">
      <div class="list">
        <div v-for="item in validList" :key="item" class="item">
          <router-link :to="`/product/${item.id}`" @click="showLayer = false">
            <img v-lazy="item.picture" alt="">
            <div class="center">
              <p class="ellipsis-2">{{ item.name }}</p>
              <p class="ellipsis">{{ item.attrsText }}</p>
            </div>
            <div class="right">
              <p class="price">¥{{ item.nowPrice }}</p>
              <p class="count">x{{ item.count }}</p>
            </div>
          </router-link>
          <i class="iconfont icon-close-new" @click="deleteCart(item.skuId)"></i>
        </div>
      </div>
      <div class="foot">
        <div class="total">
          <p>共 {{ $store.getters['cart/validTotal'] }} 件商品</p>
          <p>¥{{ validPrice }}</p>
        </div>
        <XtxButton type="plain" @click="$router.push('/cart')">去购物车结算</XtxButton>
      </div>
    </div>
  </div>
</template>

<script>
import XtxButton from '@/components/library/XtxButton'
import { useStore } from 'vuex'
import { computed, onMounted, ref, watch } from 'vue'
import Message from '@/components/library/Message'
import { useRoute } from 'vue-router'

export default {
  name: 'AppHeaderCart',
  components: { XtxButton },
  setup() {

    const store = useStore()
    //  状态控制弹出层显示,
    //  当点击商品按钮时候设置showLayer为false, 鼠标移动到购物车图标上showLayer为true
    const showLayer = ref(true)

    // 该组件在初始化的时候调用获取最新商品信息的API
    // (这个组件的声明周期非常长), 激活每个页面都有这个组件, 所有说是再次进来的时候才会触发初始化
    store.dispatch('cart/getCart')
      .then(() => {
        Message({
          type: 'success',
          text: '更新本地购物车成功'
        })
      })

    // 在computed函数中访问 getter
    const validList = computed(() => {
      // setup中取得 cart 模块中的state数据
      const list = store.state.cart.list
      // Proxy
      // console.log(list)
      // const stateElement = store.state['cart/list']
      // undefined
      // console.log(stateElement)

      // cart === undefined
      // const validList1 = store.getters.cart.validList
      // 报错
      // console.log(validList1)

      return store.getters['cart/validList']
    })

    // 总价格
    const validPrice = computed(() => {
      return store.getters['cart/validPrice']
    })

    // 头部购物车本地删除操作
    const deleteCart = (skuId) => {
      store.dispatch('cart/deleteCart', skuId)
        .then(() => {
          console.log(`删除商品skuId = ${skuId} 成功`)
        })
    }

    return {
      validList,
      validPrice,
      showLayer,
      deleteCart,
    }
  }
}
</script>

<style lang="less" scoped>
.cart {
  width: 50px;
  // 与下面的layer形成子绝互相, 虽然layer盒子的大小远远大于cart盒子, 但也能实现定位效果
  position: relative;
  z-index: 600;

  .curr {
    // todo 注意a标签, 是行内元素是不能设置宽高的, 所有需要转换成block块级标签
    display: block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    // 子绝父相
    position: relative;

    .icon-cart {
      font-size: 22px;
    }

    em {
      position: absolute;
      top: 0;
      right: 0;

      padding: 1px 6px;
      line-height: 1;
      color: #ffffff;
      background: @helpColor;
      border-radius: 10px;
      font-size: 12px;
      font-family: Arial;
      font-style: normal;
    }
  }

  &:hover {
    .layer {
      opacity: 1;
      transform: none;
    }
  }

  .layer {
    position: absolute;
    z-index: 999;
    top: 50px;
    right: 0;
    width: 400px;
    height: 400px;
    padding-top: 10px;

    // 过度效果
    transition: all 0.4s 0.2s;
    opacity: 0;
    transform: translateY(-200px) scaleY(0);

    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: -10px;
      right: 14px;
      width: 20px;
      height: 20px;
      background: #fff;

      // 作用 ?  将正方形 -> 一个菱形 画出三角形的关键步骤!!!
      transform: scaleX(.6) rotate(45deg);

      // 写成这样就失效了 ? 为什么
      //box-shadow: -3px -3px 5px rgb(0 0 0 / 10%);
      box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
    }

    .list {
      height: 310px;
      overflow: auto;
      padding: 0 10px;

      // todo 这些是什么属性 实现滑动的关键
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background: #f8f8f8;
        border-radius: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background: #eee;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #ccc;
      }

      .item {
        position: relative;
        padding: 10px 0;
        border-bottom: 1px solid #e4e4e4;

        a {
          display: flex;
          align-items: center;

          img {
            height: 80px;
            width: 80px;
            vertical-align: middle;
          }

          .center {
            font-size: 16px;
            width: 200px;
            padding: 0 10px;

            p {
              &:last-child {
                margin-top: 10px;
                font-size: 14px;
                color: #999;
              }
            }
          }

          .right {
            width: 100px;
            padding-right: 20px;
            text-align: center;
            font-size: 16px;

            .price {
              color: @priceColor;
            }

            .count {
              margin-top: 5px;
              color: #999;
            }
          }
        }

        &:hover {
          i {
            opacity: 1;
          }
        }

        i {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          //right: 5px;
          right: 0;

          color: #999;
          cursor: pointer;
          // 过度效果
          transition: all .5s;
          opacity: 0;
        }
      }
    }

    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      padding: 10px;

      background-color: #f8f8f8;

      .total {
        padding-left: 10px;
        color: #999;

        p {
          &:last-child {
            font-size: 18px;
            color: @priceColor;
          }
        }
      }
    }
  }
}
</style>
